{% extends 'base.html' %}
{% load static %}

{% block title %}功能开关管理{% endblock %}

{% block extra_css %}
<style>
    .admin-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    .page-header {
        background: linear-gradient(135deg, rgba(100, 150, 255, 0.1), rgba(0, 212, 255, 0.1));
        backdrop-filter: blur(10px);
        border: 1px solid rgba(100, 150, 255, 0.2);
        border-radius: 15px;
        padding: 30px;
        margin-bottom: 30px;
        text-align: center;
        box-shadow: 0 8px 32px rgba(100, 150, 255, 0.1);
    }

    .page-header h1 {
        background: linear-gradient(135deg, #6496ff, #00d4ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0;
        font-weight: 600;
        font-size: 2.5rem;
    }

    .switches-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 20px;
        margin-top: 20px;
    }

    .switch-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
        backdrop-filter: blur(10px);
        border: 1px solid rgba(100, 150, 255, 0.3);
        border-radius: 15px;
        padding: 25px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
    }

    .switch-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 40px rgba(100, 150, 255, 0.2);
        border-color: rgba(100, 150, 255, 0.5);
    }

    .switch-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .switch-name {
        font-size: 1.3rem;
        font-weight: 600;
        color: #ffffff;
        margin: 0;
    }

    .switch-toggle {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
    }

    .switch-toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 34px;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

    input:checked + .slider {
        background-color: #4CAF50;
    }

    input:checked + .slider:before {
        transform: translateX(26px);
    }

    .switch-description {
        color: #cccccc;
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .switch-status {
        display: inline-block;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 500;
        text-transform: uppercase;
    }

    .status-enabled {
        background-color: rgba(76, 175, 80, 0.2);
        color: #4CAF50;
        border: 1px solid rgba(76, 175, 80, 0.3);
    }

    .status-disabled {
        background-color: rgba(244, 67, 54, 0.2);
        color: #f44336;
        border: 1px solid rgba(244, 67, 54, 0.3);
    }

    .alert {
        padding: 15px;
        margin-bottom: 20px;
        border-radius: 10px;
        border: 1px solid transparent;
    }

    .alert-success {
        background-color: rgba(76, 175, 80, 0.1);
        border-color: rgba(76, 175, 80, 0.3);
        color: #4CAF50;
    }

    .alert-error {
        background-color: rgba(244, 67, 54, 0.1);
        border-color: rgba(244, 67, 54, 0.3);
        color: #f44336;
    }

    .back-btn {
        display: inline-block;
        padding: 10px 20px;
        background: linear-gradient(135deg, #6496ff, #00d4ff);
        color: white;
        text-decoration: none;
        border-radius: 25px;
        font-weight: 500;
        transition: all 0.3s ease;
        margin-bottom: 20px;
    }

    .back-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(100, 150, 255, 0.3);
        color: white;
        text-decoration: none;
    }
</style>
{% endblock %}

{% block content %}
<div class="admin-container">
    <div class="page-header">
        <h1><i class="fas fa-toggle-on"></i> 功能开关管理</h1>
        <p style="color: #cccccc; margin: 10px 0 0 0;">管理系统功能的启用和禁用状态</p>
    </div>

    <a href="/" class="back-btn">
        <i class="fas fa-arrow-left"></i> 返回主页
    </a>

    <div id="alert-container"></div>

    <div class="switches-grid">
        {% for switch in switches %}
        <div class="switch-card">
            <div class="switch-header">
                <h3 class="switch-name">{{ switch.get_switch_key_display }}</h3>
                <label class="switch-toggle">
                    <input type="checkbox" 
                           {% if switch.is_enabled %}checked{% endif %}
                           onchange="toggleSwitch({{ switch.id }}, this)">
                    <span class="slider"></span>
                </label>
            </div>
            
            <div class="switch-description">
                {{ switch.description|default:"暂无描述" }}
            </div>
            
            <div style="margin-top: 15px;">
                <span class="switch-status {% if switch.is_enabled %}status-enabled{% else %}status-disabled{% endif %}">
                    {% if switch.is_enabled %}已启用{% else %}已禁用{% endif %}
                </span>
                <small style="color: #999; margin-left: 10px;">
                    内部名称: {{ switch.switch_key }}
                </small>
            </div>
        </div>
        {% empty %}
        <div class="switch-card" style="grid-column: 1 / -1; text-align: center;">
            <p style="color: #cccccc; font-size: 1.1rem;">
                <i class="fas fa-info-circle"></i> 暂无功能开关配置
            </p>
        </div>
        {% endfor %}
    </div>
</div>

<script>
function toggleSwitch(switchId, checkbox) {
    const originalState = checkbox.checked;
    
    fetch(`/accounts/admin/toggle_feature_switch/${switchId}/`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': getCookie('csrftoken')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert(data.message, 'success');
            // 更新状态显示
            const card = checkbox.closest('.switch-card');
            const statusSpan = card.querySelector('.switch-status');
            if (data.is_enabled) {
                statusSpan.textContent = '已启用';
                statusSpan.className = 'switch-status status-enabled';
            } else {
                statusSpan.textContent = '已禁用';
                statusSpan.className = 'switch-status status-disabled';
            }
        } else {
            showAlert(data.message, 'error');
            // 恢复原状态
            checkbox.checked = !originalState;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('操作失败，请稍后重试', 'error');
        // 恢复原状态
        checkbox.checked = !originalState;
    });
}

function showAlert(message, type) {
    const alertContainer = document.getElementById('alert-container');
    const alert = document.createElement('div');
    alert.className = `alert alert-${type}`;
    alert.innerHTML = `<i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i> ${message}`;
    
    alertContainer.appendChild(alert);
    
    // 3秒后自动移除
    setTimeout(() => {
        alert.remove();
    }, 3000);
}

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
</script>
{% endblock %}